<template>
	<div>
		<div class="gva-search-box">
			<el-form ref="searchForm" :inline="true" :model="searchInfo">
				<el-form-item>
					<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="gva-table-box">
			<div style="display: flex;align-items: center;">
				<div class="img-type">商家背景图：</div>
			</div>
			<el-upload action="/api/fileUploadAndDownload/upload" list-type="picture-card" :on-success="handleSuccess"
				:on-remove="handleRemove" :before-remove="beforeRemove" :on-preview="handlePictureCardPreview"
				:before-upload="BeforeLoad" :file-list="tableData.merchant" :multiple="false">
				<div class="upload-btn">
					<el-icon class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</div>
			</el-upload>

			<div class="img-type" >个人背景图：</div>
			<el-upload action="/api/fileUploadAndDownload/upload" list-type="picture-card" :on-success="handleSuccess1"
				:on-remove="handleRemove1" :before-remove="beforeRemove1" :on-preview="handlePictureCardPreview"
				:before-upload="BeforeLoad" :file-list="tableData.personal" :multiple="false" >
				<div class="upload-btn">
					<el-icon class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</div>
			</el-upload>
			<el-dialog v-model="dialogVisible">
				<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
			</el-dialog>
			
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	
	import {
		isImageMime
	} from "@/utils/image";
	
	import {
		backgroundSet,
		backgroundGet
	} from "@/api/api";
	let searchInfo = ref({});
	let tableData = ref({
		merchant: [],
		personal: []
	});
	const indexRemove = ref();
	const indexRemove1 = ref();
	const dialogImageUrl = ref('');
	const dialogVisible = ref(false);
	onMounted(() => {
		getList();
	});
	const BeforeLoad = file => {
		if (file.size > 5 * 1024 * 1024) {
			ElMessage({
				message: "当前文件大于5M，请重新选择",
				type: "error"
			});
			return;
		} else {
			const isImage = isImageMime(file.type);
			let pass = true;
			if (!isImage) {
				ElMessage.error("只能上传 jpg,png,svg,webp 格式的图片!");
				pass = false;
			}
			return pass;
		}
	};

	// 预览
	const handlePictureCardPreview = (uploadFile) => {
		dialogImageUrl.value = uploadFile.img
		dialogVisible.value = true
	};
	const beforeRemove = (file, fileList) => {
		indexRemove.value = fileList.findIndex((files) => files.url == file.url)
		return true
	};
	//移除文件
	const handleRemove = (file, fileList) => {
		tableData.value.merchant.splice(indexRemove.value, 1)
	};
	const handleSuccess = (response, file, fileList) => {
		// 这里可以根据你的后端返回的数据结构来调整，以下是一个示例：
		tableData.value.merchant.push({
			"image_url": response.data.file.url,
			"url": response.data.file.url
		});
		let  params = {
			"type":"merchant",
			"images":tableData.value.merchant
		};
		console.log(params)
		setBackground(params);

	};
	const beforeRemove1 = (file, fileList) => {
		indexRemove1.value = fileList.findIndex((files) => files.url == file.url)
		return true
	};
	//移除文件
	const handleRemove1 = (file, fileList) => {
		tableData.value.personal.splice(indexRemove1.value, 1)
	};
	const handleSuccess1 = (response, file, fileList) => {
		// 这里可以根据你的后端返回的数据结构来调整，以下是一个示例：
		tableData.value.personal.push({
			"image_url": response.data.file.url,
			"url": response.data.file.url
		});
		let  params = {
			"type":"personal",
			"images":tableData.value.personal
		};
		setBackground(params);
	};
	const getList = (params) => {
		backgroundGet(params).then(response => {
			if (response.code === 200) {
				response.data.personal.forEach(item=>{
					item.url=item.image_url
				})
				tableData.value.personal=response.data.personal
				
				response.data.merchant.forEach(item=>{
					item.url=item.image_url
				})
				tableData.value.merchant=response.data.merchant
			}
		});
	};
	const setBackground = (param) => {
		backgroundSet(param).then(response => {
			if (response.code === 200) {
			//	getList();
				/* tableData.value = response.data || {
					merchant: [],
					personal: []
				}; */
			}
		});
	};
	const handleCurrentChange = val => {
		page.value = val;
		getList();
	};
	const handleSizeChange = val => {
		page_size.value = val;
		getList();
	};
	const onSubmit = () => {
		page.value = 1;
		page_size.value = 10;
		getList();
	};
	const onReset = () => {
		searchInfo.value = {};
		page.value = 1;
		page_size.value = 10;
		createDate.value = [
			`${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
			`${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`
		];
		getList();
	};
</script>
<style lang="scss" scoped>
	.el-form-item {
		width: 300px;
	}

	.gva-table-box {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;

		.img-type {
			margin-top: 20px;
			font-size: 20px;
			color: #333;
			font-weight: 500;
			padding-left: 10px;
			margin-bottom: 20px;
		}

		.img-box {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 10px;
			margin-bottom: 10px;

			.img {
				width: 200px;
				height: 200px;
				object-fit: fill;
				padding: 10px;
				cursor: pointer;
			}
		}
	}
</style>